<template>
  <!-- 关联检测异常 -->
  <view class="relat-error">
    <u-collapse :arrow="false" :item-style="itemStyle" :accordion="false">
      <u-collapse-item v-for="(obj, index) in errList" :key="obj.name" :open="true" :index="index" @change="itemChange">
        <!-- 标题项 -->
        <view slot="title" class="title-box flex flex-ai-c flex-jc-sb">
          <view class="title flex flex-ai-c">
            <view class="line"></view>
            <text>{{ obj.name }}</text>
          </view>
          <view>
            <text class="font-24 color-999 mr-10">{{ obj.isOpen ? '收起' : '展开' }}</text>
            <u-icon name="arrow-down" size="28rpx" color="#999" :class="['icon-up', obj.isOpen ? 'icon-down':'']"></u-icon>
          </view>
        </view>

        <view class="err-list-box">
          <view class="total-check-amount">
            <view class="amount-box">
              <text>
                正常
                <text class="color-3DB707">{{ obj.normal }}</text>
                项 异常
                <text class="color-EB5C02">{{ obj.abnormal }}</text>
                项；
              </text>
              <text>
                需修复
                <text class="color-EB5C02">{{ obj.needRepairNum }}</text>
                项，未检测
                <text class="color-EB5C02">{{ obj.didNotDetect }}</text>
                项
              </text>
            </view>            
          </view>
          
          <view class="err-list">
            <view v-for="(item, index) in obj.exceptionList" :key="item.exceptionId" class="item flex flex-jc-sb">
              <view class="err-content">
                <view class="err-label">{{ item.exceptionName }}</view>
                <view class="err-name">{{ item.exceptionMsg }}</view>
                <view class="err-img" @click="previewImg(item.imgs)">
                  <image :src="item.imgs[0]" mode="center"></image>
                  <view class="img-bottom-text">{{ item.position }}</view>
                </view>
              </view>
              
              <view class="right-content flex flex-dir-c">
                <view class="user-ok">
                  <text class="mr-10 color-EB5C02">客户同意修复</text>
                  <!-- 如果有订单id，说明此项关联了订单，则显示 -->
                  <text v-if="item.orderId" class="color-999">已添加到关联订单</text>
                  <i-icon icon="iconduigou" size="28rpx" color="#999"></i-icon>
                </view>
                <view v-if="!item.orderId" class="addto-order">
                  <text class="text">添加关联订单</text>
                  <!-- 如果异常项关联了订单，需隐藏此开关，不能选择 -->
                  <switch :checked="item.isChecked" color="#41CB05" style="transform:scale(0.7)" @change="switchChange($event, item)" />
                </view>
              </view>
            </view>
          </view>
        </view>
      </u-collapse-item>
    </u-collapse>
    
    <!-- 固定底部栏 -->
    <view class="footer-bar flex flex-jc-sb">
      <view class="left flex">
        <view v-if="allItemAmount > 0" class="col col-1" @click="addAll()">
          <i-icon v-show="selectedList.length === allItemAmount" icon="icongouxuan" type="m" size="38rpx"></i-icon>
          <i-icon v-show="selectedList.length < allItemAmount" icon="icontuoyuan" size="38rpx" color="#eee"></i-icon>
          <text class="ml-10">添加全部{{ allItemAmount }}项</text>
        </view>
        <view v-else class="col col-1">全部需修复{{ allItemAmount }}项</view>
        <view class="col col-2">已添加<text class="num">{{ selectedList.length }}</text>项</view>
      </view>
      <view class="btn-right" @click="confirm()">{{ allItemAmount > 0 ? '确定关联':'返回' }}</view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      errList: [],  // 异常列表项
      allItemAmount: 0,  // 异常项总数量
      selectedList: [], // 已选的列表
      itemStyle: {
        marginBottom: '24rpx',
        background: '#fff',
        borderRadius: '10rpx',
        padding: '0 20rpx'
      }
    }
  },
  
  created() {
    this.getErrlist()
    this.selectedList = JSON.parse(JSON.stringify(this.$store.state.afterSales.selectedErrList))
  },

  methods: {
    // 获取异常项列表
    async getErrlist() {
      try {
        let id = this.$store.state.afterSales.arrvialId
        const res = await this.$api.afterSales.GetGroupWorkExceptionList(id)
        res.data.forEach(item => {
          item.isOpen = true // 折叠
          item.exceptionList.forEach(ep => {
            ep.isChecked = false  // 关联开关
          })
        })
        this.errList = res.data
        this.allItemAmount = this.computAllAmount(res.data)
        this.handleCheckedItem(this.errList)
      } catch (e) {
        //TODO handle the exception
      }
    },
    
    // 计算所有异常项总数量
    computAllAmount(list) {
      let sum = 0
      list.map(item => {
        sum += item.exceptionList.filter(a => !a.orderId).length
      })
      return sum
    },
    
    // 自动勾选已选项
    handleCheckedItem(list) {
      let arr = this.selectedList
      if (arr.length === 0) return
      
      list.forEach(item => {
        item.exceptionList.forEach(ep => {
          // 没有关联订单的异常
          if (!ep.orderId) {
            // 查找列表有对应id的项，将此项勾选
            if (arr.find(f => f.exceptionId === ep.exceptionId)) {
              ep.isChecked = true
            }
          }
        })
      })
    },
    
    // 监听折叠面板项的折叠
    itemChange(e) {
      this.errList[e.index].isOpen = e.show
    },
    
    // 监听关联开关
    switchChange(e, item) {
      item.isChecked = e.target.value
      if (e.target.value) {
        // 添加到已选列表
        this.selectedList.push(item)
      } else {
        // 关闭关联，就从已选列表里移除
        let fIndex = this.selectedList.findIndex(a => a.exceptionId === item.exceptionId)
        this.selectedList.splice(fIndex, 1)
      }
      console.log(this.selectedList)
    },
    
    // 添加全部7项
    addAll() {
      // 如果需修复异常为0项，则不执行操作
      if (this.allItemAmount === 0) return
      
      // 已选列表项和异常总数相等，表示全选状态
      if (this.selectedList.length === this.allItemAmount) {
        this.errList.forEach(item => {
          item.exceptionList.forEach(ep => {
            // 没有关联订单的异常
            if (!ep.orderId) {
              ep.isChecked = false
            }
          })
        })
        this.selectedList = [] // 清空已选列表
      } else {
        this.selectedList = [] // 清空已选列表
        this.errList.forEach(item => {
          item.exceptionList.forEach(ep => {
            // 没有关联订单的异常
            if (!ep.orderId) {
              ep.isChecked = true
              this.selectedList.push(ep)
            }
          })
        })
      }
    },
    
    // 预览图片
    previewImg(imgs) {
      uni.previewImage({
        urls: imgs,
        current: 0
      })
    },
    
    // 确定关联
    confirm() {
      if (this.allItemAmount === 0) {
        uni.navigateBack()
        return false
      }
      
      if (this.selectedList.length === 0) {
        uni.showToast({
          title: '请选择一个异常进行关联',
          icon: 'none'
        })
      } else {
        this.$store.commit('afterSales/setOrderErrList', this.selectedList)
        uni.navigateBack({
          delta: 1
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.relat-error {
  min-height: 100%;
  padding: 24rpx 24rpx 118rpx;
  background-color: #F4F4F4;
}

.err-list-box {
  background-color: #fff;
  border-top: 1px solid #eee;
  
  .total-check-amount {
    padding: 20rpx 0;
    
    .amount-box {
      display: inline-block;
      padding: 14rpx 18rpx;
      background: #f6f6f6;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #999;
    }    
  }
}

.title-box {
  width: 100%;

  .title {
    width: 50%;

    .line {
      width: 8rpx;
      height: 30rpx;
      background: #ffe23e;
      border-radius: 4rpx;
    }

    text {
      margin-left: 12rpx;
      font-size: 28rpx;
      font-weight: 500;
      color: #666666;
    }
  }

  .right-item {
    width: 15%;
    font-size: 28rpx;
    font-weight: 500;
    color: #999999;
    text-align: center;

    &:last-child {
      width: 25%;
      margin-left: auto;
    }
  }
  .icon-up {
    transition: all .3s;
  }
  .icon-down {
    transform: rotate(180deg);
  }
}

// 检测异常列表
.err-list {
  .item {
    padding: 32rpx 0;
    border-top: 1px solid #eee;
  }
  
  // 左边异常内容
  .err-content {
    .err-label {
      font-size: 26rpx;
      font-weight: bold;
      color: #333;
    }
    
    .err-name {
      display: inline-block;
      padding: 18rpx 25rpx;
      margin: 18rpx 0;
      background-color: #FFF7F7;
      font-size: 24rpx;
      color: #EB5C02;
      border-radius: 10rpx;
    }
    
    .err-img {
      width: 266rpx;
      height: 200rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;
      
      image {
        width: 100%;
        height: 100%;
      }
      
      .img-bottom-text {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 50rpx;
        line-height: 50rpx;
        padding-left: 22rpx;
        background: rgba(0,0,0,0.4);
        font-size: 22rpx;
        color: #fff;
      }
    }
  }
  
  // 右边关联开关
  .right-content {
    flex: 1;
    
    .user-ok {
      margin-top: 36%;
      font-size: 24rpx;
      color: #999999;
      text-align: right;
      
      text {
        display: inline-block;
        transform: scale(0.87);
      }
    }
    
    .addto-order {
      margin-top: auto;
      transform: translateY(10px);
      text-align: right;
      
      .text {
        font-size: 24rpx;
        font-weight: bold;
        color: #3DB707;
      }
    }
  }
  
}

// 固定底部栏
.footer-bar {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 98rpx;
  
  .left {
    flex: 1;
    background-color: #333333;
    
    .col {
      width: 50%;
      line-height: 98rpx;
    }
    
    .col-1 {
      color: #eee;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .col-2 {
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      
      .num {
        color: #FFE23E;
      }
    }
  }
  
  .btn-right {
    width: 220rpx;
    line-height: 98rpx;
    background-color: #FFE23E;
    font-size: 32rpx;
    color: #333;
    text-align: center;
  }
}
</style>
